<template>
	<div class="u-page tpink-page-bgcolor">
		<u-navbar :is-back="true" :custom-back="comeback" :title="title" :background="background" :border-bottom="false" back-icon-color="#ffffff">
		  <view class="slot-wrap">
		    <u-image width="400rpx" height="65rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/title.png"></u-image>
		  </view>
		</u-navbar>
		<div class="bg-area">
			<div class="topbar">
				<div class="input">
					<u-icon name="search" size="40" color="#fb3a35"></u-icon>
					<input type="text" v-model="keyword" :placeholder="hotText" placeholder-style="padding-top: 5rpx;padding-left: 10rpx;font-size: 28rpx;" 	@confirm="search"/>
					<div class="btn" @click="search">搜索</div>
				</div>
			</div>
			<div class="u-flex color-white u-pl-10 u-pr-10" v-if="!searchStr">
				<div class="label-item">
					<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/label1.png"></u-image>
					<div class="u-pl-5">全场包邮</div>
				</div>
				<div>|</div>
				<div class="label-item">
					<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/label2.png"></u-image>
					<div class="u-pl-5">超值低价</div>
				</div>
				<div>|</div>
				<div class="label-item">
					<u-image width="30rpx" height="30rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/label3.png"></u-image>
					<div class="u-pl-5">48小时发货</div>
				</div>
			</div>
			<div class="swiper-box u-mt-15" v-if="!searchStr">
				<div class="swiper-title">
					<div class="u-pr-5">今日推荐</div>
					<u-image width="40rpx" height="40rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/dianzan.png"></u-image>
				</div>
				<div style="display: flex;flex-wrap: wrap;width: 95%;margin: 0 auto;">
					<a href="javascript:;" class="zone-goods-item" v-for="(item,index) in RecommendGoods" :key="index"
					   @click="toGoodsDetails(item)">
						<div class="aui-list-theme-img">
							<u-image width="100%" height="220rpx" :src="item.goodsImages.split(',')[0]"></u-image>
						</div>
						<div class="aui-list-theme-message">
							<div class="zone-list-theme-title">{{ item.goodsName?item.goodsName:'' }}</div>
							<div class="u-flex" style="justify-content: space-between;">
								<span class="zone-amount-money font-baseline">
									<span class="u-font-bold u-fz-16">&yen;{{ item.discountPrice?item.discountPrice:0 }}</span>
								</span>
							</div>
						</div>
					</a>
				</div>
				<!-- <swiper autoplay="true" indicator-dots='true' indicator-color='#ccccc' indicator-active-color="#bdbcbd" current='2' interval='3000' circular='true' duration='1000' style="height: 320rpx;border-radius: 20rpx;">
					  <swiper-item v-for="(item,index) in RecommendGoods" :key="index">
							<div class="u-flex" style="width: 95%;margin: 0 auto;">
								<div class="swiper-item" v-for="(titem,tindex) in item.data" :key="tindex" @click="toGoodsDetails(titem)">
									<u-image width="150rpx" height="150rpx" border-radius="20" :src="titem.goodsImages.split(',')[0]"></u-image>
									<div class="swiper-item-title">{{titem.goodsName}}</div>
									<div class="swiper-item-price">&yen;{{titem.discountPrice}}</div>
								</div>
							</div>
					  </swiper-item>
				</swiper> -->
			</div>
			<div class="u-pt-15" v-if="!searchStr">
				<div class="aui-list-box-title">
					不到10元，尽享惊喜！
				</div>
				<div class="u-pt-5">
					<u-image width="100%" height="5rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/Horizontalline.png"></u-image>
				</div>
			</div>
			<div class="u-pb-40 tpink-page-bgcolor">
				<div>
					<div style="font-weight: bold;width: 95%;margin: 0 auto;">
						<u-tabs :list="list" bg-color="#fef2f6" :show-bar="false" active-color="#000000" inactive-color="#6b6969"
							:active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="current" @change="change"></u-tabs>
						<div class="u-flex u-scroll-x" style="margin-left: 15rpx;margin-right: 15rpx;padding-bottom: 10rpx;">
							<div v-for="(item,index) in subList[current].data">
								<u-tag :text="item.name" mode="dark" :bg-color="item.checked?'#eb5468':'#f3f2f3'" 
										:color="item.checked?'#ffffff':'#797878'" @click="selectTag(item)" />
							</div>
						</div>
					</div>
				</div>
				<div class="aui-list-box u-pl-5 u-pr-5" v-if="GoodSalesList && GoodSalesList.length>0">
					<a href="javascript:;" class="aui-list-item" v-for="(item,index) in GoodSalesList" :key="index"
						@click="toGoodsDetails(item)">
						<div class="aui-list-theme-img">
							<u-image width="100%" height="343rpx" :src="item.goodsImages.split(',')[0]"></u-image>
						</div>
						<div class="aui-list-theme-message">
							<div class="u-flex line-ellipsis">
								<div class="goods-title-tag" :style="'background-color: '+item.attributeColor+';'" v-if="item.productAttribute">{{item.productAttribute}}</div>
								<h3 class="aui-list-theme-title">{{item.goodsName}}</h3>
							</div>
							<div class="u-flex pt-3">
								<u-image width="25rpx" height="25rpx" src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Life/life_label_icon.png"></u-image>
								<div class="goods-label-text">玫丽全网最低价</div>
							</div>
							<div class="u-flex u-pb-5" style="justify-content: space-between;">
								<span class="amount-money font-baseline">
									<span class="u-fz-18 u-font-bold">&yen;{{item.discountPrice}}</span>
								</span>
								<span class="sales-volume">
									本期售{{item.soldNum?item.soldNum:0}}
								</span>
							</div>
						</div>
						<ShareBtn :docUnid="shareData.docUnid" :url="shareData.url"
							:route="shareData.route" :style="shareData.style" :type="shareData.type" :posterData="shareData.posterData"
							btnText="帮卖海报" ref="shareModule"></ShareBtn>
					</a>
				</div>
				<div class="u-text-center" style="padding-top: 20%;" v-else>
					<u-empty text="暂无商品" mode="data"></u-empty>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import shareMixins from '@/mixins/share';
export default {
  mixins: [shareMixins],
  data() {
    return {
      background: {
        // 导航栏背景图
        background: 'url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/bg1.png) no-repeat',
        // 还可以设置背景图size属性
        backgroundSize: '100%',
      },
	  RecommendGoods: [],
	  keyword: '',
	  pageNum: 1,
	  pageSize: 10,
	  searchStr: '',
	  GoodSalesList: [],
	  shareData: {
			docUnid: '',
			url: '',
			style: 9,
			type: 2,
			route: '',
			posterData: {},
			imageUrl: '',
			shareTitle: ''
	  },
	  hotText: '请输入关键词',
	  list: [
	    {name: '为你推荐'},
		{name: '孩子用品'},
		{name: '宝妈自用'},
		{name: '家庭消费'}
	  ],
	  current: 0,
	  subList: [
		  {
			  data: []
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'健康和营养',checked:false},
				  {name:'教育和成长',checked:false},
				  {name:'娱乐和玩具',checked:false}
			  ]
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'美容与保健',checked:false},
				  {name:'时尚与穿搭',checked:false},
				  {name:'兴趣与爱好',checked:false}
			  ]
		  },
		  {
			  data: [
				  {name:'全部',checked:true},
				  {name:'厨房用品与食品',checked:false},
				  {name:'家居生活与旅行',checked:false},
				  {name:'家居装饰与家具',checked:false}
			  ]
		  }
	  ],
	  supplyChain: ''
    }
  },

  mounted() {

  },

  onShow() {
  },

  onPullDownRefresh() {
	this.pageNum = 1
	this.getRecommendGoods()
    // 停止Loading
    uni.stopPullDownRefresh();
  },

  onReachBottom() {
	this.pageNum += 1
	this.getGoodSalesList()
  },

  onLoad(option) {
	  this.getRecommendGoods()
	  this.increasePageTraffic()
  },

  methods: {

	  /**
	   * 获取今日推荐数据
	   */
	  async getRecommendGoods() {
		  let result = await this.$u.api.unifyMiniRestGet({
		    systemid: "meily",
		    url: "/goods/query/zone/show/goods/NINE_POINT_NINE_ZONE",
		    loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
		  });
		  if(result.code == 200){
			 this.RecommendGoods = []
		  	 for(let i in result.data.NINE_POINT_NINE_ZONE){
		  	 	if(i < 6){
					this.RecommendGoods.push(result.data.NINE_POINT_NINE_ZONE[i])
		  	 	}
		  	 }
		  	 this.getGoodSalesList()
		  }
	  },

	  change(index) {
		if(this.current != index){
			this.current = index
			if(this.current != 0){
				this.supplyChain = this.list[this.current].name
			}else{
				this.supplyChain = ''
			}
			this.pageNum = 1
			this.getGoodSalesList()
		}
	  },

	  /**
	   * 获取商品销售类列表数据 默认排除专区展示数据
	   */
	  async getGoodSalesList() {
	  	let result = await this.$u.api.unifyMiniRest({
	  		systemid: "meily",
			url: "/goods/shelf/list",
			goodsType: 'NINE_POINT_NINE_ZONE',
			searchStr: this.searchStr,
			supplyChain: this.supplyChain,
	  		pageNum: this.pageNum,
	  		pageSize: this.pageSize,
			excludeZoneData: true,
	  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if (result.code == 200) {
	  		if (result.rows.length > 0 && this.isNotNull(result.rows[0].goodsName)) {
	  			this.hotText = "大家都在搜" + result.rows[0].goodsName;
	  		}

	  		if (this.pageNum != 1) {
	  			this.GoodSalesList = this.GoodSalesList.concat(result.rows);
	  		} else {
	  			this.GoodSalesList = result.rows;
	  		}
	  	}
	  },

	  /**
	   * 获取搜索框数据
	   */
	  getSearchStr(e) {

	  },

	  /**
	   * 搜索
	   */
	  async search(){
		  this.searchStr = this.keyword
		  this.pageNum = 1
		  this.getGoodSalesList()
	  },

	  /**
	   * 跳转到商品详情
	   */
	  async toGoodsDetails(item) {

		  // 增加访问量，不需要管是否执行成功
		  this.increaseTraffic(item);

		  // 跳转到销售机会页面
		  this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
	  	// 未登录跳转到登录页面
	  	// var loginRes = this.checkLogin()
	  	// if (!loginRes) {
	  	// 	return false;
	  	// }
	  	// let result = await this.$u.api.unifyMiniRestGet({
	  	// 	systemid: "meily",
	  	// 	url: "/goods/cycle/" + item.goodsId,
	  	// });
	  	// if (result.code == 200 && this.isNotNull(result.data)) {
	  	// 	let result2 = await this.$u.api.unifyMiniRest({
	  	// 		systemid: "meily",
	  	// 		url: "/buying/getSimilarGroups",
	  	// 		initiatorId: uni.getStorageSync('userInfo').userId,
	  	// 		cycle: result.data, // 周期串
	  	// 		goodsNo: item.goodsNo,
		// 		goodsId: item.goodsId,
	  	// 		sceneAssetsId: "f2e88bd30198f04f6c092420aab54b64a45f",
	  	// 		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	// 	});
	  	// 	if (result2.code == 200) {
	  	// 		if (result2.data.length > 0) {
	  	// 			// 有正在进行中的拼团(默认取第一个)，直接跳转到拼团详情
	  	// 			this.$u.route('/pages_private_scene2/GroupPurchase/SolitaireDetails?docUnid='+result2.data[0].id);
	  	// 		}else {
	  	// 			// 跳转到销售机会页面
	  	// 			this.$u.route('/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId);
	  	// 		}
	  	// 	} else {
	  	// 		this.$u.toast(result2.msg);
	  	// 	}
	  	// }else{
	  	// 	this.$u.toast("出错啦！");
	  	// }
	  },

	  /**
	   * 增加访问量
	   */
	  async increaseTraffic(item){
	  	console.log("**************************");
	  	console.log("开始执行，增加访问量...");
	  	const userInfo = uni.getStorageSync('userInfo')
	  	let result = await this.$u.api.unifyMiniRest({
	  		systemid: "meily",
	  		url: "/behavior/statistics/update",
	  		createUser: userInfo.userId,
	  		createUserName: userInfo.nickName,
	  		createUserAvatar: userInfo.avatarUrl,
	  		behaviorId: item.goodsId,
	  		behaviorName: item.goodsName,
	  		behaviorType: '0',// 访问量
	  		sourceId: item.goodsId,
	  		sourceType: '0',// 商品
	  		remark: '',
	  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	console.log(result);
	  	console.log("增加访问量，执行结束！");
	  	console.log("**************************");
	  },
	  
	  /**
	   * 增加进入9.9专区访问量
	   */
	  async increasePageTraffic(){
	    console.log("**************************");
	    console.log("开始执行，增加访问量...");
	    let current_page = this.getCurrentPageUrl(this)
	    const userInfo = uni.getStorageSync('userInfo')
	    let result = await this.$u.api.unifyMiniRest({
	      systemid: "meily",
	      url: "/behavior/statistics/update",
	      createUser: userInfo.userId,
	      createUserName: userInfo.nickName,
	      createUserAvatar: userInfo.avatarUrl,
	      behaviorId: current_page,
	      behaviorName: '9.9专区',
	      behaviorType: '0',// 访问量
	      sourceId: current_page,
	      sourceType: '2',// 页面地址
	      remark: '',
	      loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	    });
	    console.log(result);
	    console.log("增加访问量，执行结束！");
	    console.log("**************************");
	  },


	  /**
	   * 唤起分享组件弹出
	   */
	  wakeShareModule(item,index) {
	  	let that = this
	  	that.shareData.docUnid = item.goodsNo
	  	that.shareData.url = '/pages_private_scene2/GroupPurchase/DistributionGoods?goodsNo=' + item.goodsNo + '&goodsId=' + item.goodsId
	  	let price = item.foremanReward + "~￥" + (parseFloat(item.foremanReward?item.foremanReward:0) + parseFloat(item.consumerShareReward?item.consumerShareReward:0) + parseFloat(item.tenThousandProfit?item.tenThousandProfit:0)).toFixed(2)
	  	let obj = {
	  			imageURL: item.goodsImages.split(",")[0], // 商品主图URL地址
	  			productName: item.goodsName, // 商品名称
	  			productPrice: price, // 商品价格
	  			invitemsg: '邀请您参与商品销售工作', // 邀请内容。如邀请购买商品，可不传。默认邀请
	  			type: 'bmhb'
	  		}
	  	that.shareData.posterData = obj
	  	that.shareData.imageUrl = item.goodsImages.split(",")[0]
		that.shareData.shareTitle = '每件赚¥' + parseFloat(item.foremanReward ? item
				.foremanReward : 0) + '~¥' + (parseFloat(item.foremanReward ? item
				.foremanReward : 0) + parseFloat(item.tenThousandOnlineCashback ? item
				.tenThousandOnlineCashback : 0) + parseFloat(item.tenThousandProviderCashback ?
				item.tenThousandProviderCashback : 0)).toFixed(2) +
			'！！代理销售' + item.goodsName
	  	that.$refs.shareModule[index].wakeUpPop()
	  },
	  
	  /**
	   * 选中子分类
	   */
	  selectTag(item) {
	  	if(!item.checked){
	  		for(const i in this.subList[this.current].data) {
	  			if(this.subList[this.current].data[i].name == item.name){
	  				this.subList[this.current].data[i].checked = true
	  			}else{
	  				this.subList[this.current].data[i].checked = false
	  			}
	  		}
	  		if(this.current != 0){
	  			this.supplyChain = item.name=='全部'?this.list[this.current].name:(this.list[this.current].name + '-' + item.name)
	  		}else{
	  			this.supplyChain = ''
	  		}
	  		this.pageNum = 1
	  		this.getGoodSalesList()
	  	}
	  }

  }

};
</script>

<style scoped>
.bg-color {
	background-color: #f4f2f5;
}
.bg-area {
	height: 350rpx;
	background: url(https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/RushPurchase/bg2.png) no-repeat;
	background-size: 100%;
}
.topbar{
  position: relative;
  z-index: 1;
  padding: 10px;
}
.input{
  background-color: #fff;
  padding: 4px 10px;
  border-radius: 30px;
  display: flex;
}
.input input{
  flex: 1;
}
.input .btn {
	background-color: #fb3a35;
	color: #ffffff;
	border-radius: 30rpx;
	width: 120rpx;
	text-align: center;
	height: 55rpx;
	line-height: 55rpx;
}
.search-placeholder {
	padding-top: 5rpx;
	padding-left: 10rpx;
	font-size: 28rpx;
}
.color-white {
	color: #ffffff;
}
.label-item {
	width: 32%;
	font-size: 28rpx;
	font-weight: 300;
	display: flex;
	justify-content: center;
	align-items: center;
}
.swiper-box {
	background-color: white;
	width: 95%;
	height: 800rpx;
	border-radius: 20rpx;
	margin:0 auto;
	/* box-shadow: 0px 3px 12px 0 #e4e4e4; */
	/* border-bottom: 1px solid #ececec;
	border-right: 1px solid #ececec; */
}
.swiper-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20rpx 10rpx 40rpx 10rpx;
}
.swiper-item-title {
	font-size: 22rpx;
	padding-top: 8rpx;
	width: 150rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.swiper-item-price {
	color: #ea4d5e;
	font-size: 32rpx;
	font-weight: 450;
}
.swiper-title {
	display: flex;
	font-size: 34rpx;
	font-weight: bold;
	padding: 30rpx 0rpx 30rpx 20rpx;
}

/* 商品列表 */
.aui-list-box {
	overflow: hidden;
	position: relative;
	background-color: #fffbfe;
}

.aui-list-box-title {
	font-size: 38rpx;
	color: #ea4d5e;
	text-align: center;
}

.aui-list-item {
	width: 47%;
	float: left;
	margin: 0 0 2% 2%;
	background: #fff;
	display: block;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 10rpx;
	/* box-shadow: 5rpx 5rpx 5rpx 5rpx #f3f2f2eb; */
}

.aui-list-theme-img {
	height: auto;
	width: 100%;
	position: relative;
}

.aui-list-theme-img img {
	width: 100%;
	height: auto;
	display: block;
	border: none;
}

.aui-list-theme-message {
	background: #ffffff;
	padding: 10rpx 10rpx;
}

.aui-list-theme-title {
	color: #4a4a4a;
	font-size: 30rpx;
	line-height: 38rpx;
	margin-top: 5rpx;
}

.aui-list-theme-message p {
	// color: #ff3b52;
	font-size: 24rpx;
	font-weight: bold;
}

.aui-list-theme-message span.line-through {
	font-size: 0.7rem;
	color: #919191;
	padding: 0 0.2rem;
	text-decoration: line-through;
}

.aui-list-theme-message span.none-line-through {
	font-size: 0.7rem;
	color: #919191;
	padding: 0 0.2rem;
}

.aui-list-theme-message p i {
	font-style: normal;
	font-size: 0.7rem;
	padding: 0 0.2rem;
	color: #ff3b52;
	float: right;
	width: 25px;
	height: 25px;
}

.aui-list-theme-message p em {
	font-style: normal;
	font-size: 0.7rem;
	color: #ff3b52;
	text-decoration: line-through;
	font-weight: normal;
}

.price-tag {
	padding: 2rpx;
	color: #f16158;
	border: 2rpx solid #ea4d5e;
	text-align: center;
	font-size: 18rpx;
	line-height: 22rpx;
}

.sold-num {
	color: #b7b7b7;
	font-size: 24rpx;
}

/* 两行或多行显示... */
.line-ellipsis {
	width: 320rpx;
	white-space: nowrap;
	overflow: hidden;
	/* text-overflow: ellipsis; */
	/* autoprefixer: off */
	-webkit-box-orient: vertical;
	/* autoprefixer: on */
}

.goods-title-tag {
	padding: 0rpx 5rpx;
	color: #ffffff;
	border-radius: 5rpx;
	font-size: 24rpx;
	margin-right: 10rpx;
}

.goods-label-text {
	color: #ba8e41;
	font-size: 22rpx;
	font-weight: 300;
	padding-left: 3rpx;
}

.pt-3 {
	padding-top: 3rpx;
}

.font-baseline {
	display: flex;
	align-items: baseline;
}

.amount-money {
	color: #ea4d5e;
	font-size: 22rpx;
}

.sales-volume {
	color: #b7b7b7;
	font-size: 22rpx;
}

.zone-goods-item {
  width: 31%;
  float: left;
  margin: 0 1% 2% 1%;
  display: block;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0rpx 6rpx 12rpx 0 #e4e4e4;
  border-bottom: 2rpx solid #ececec;
  border-right: 2rpx solid #ececec;
}

.zone-list-theme-title {
	color: #4a4a4a;
	font-size: 28rpx;
	line-height: 30rpx;
	margin-top: 5rpx;
	width: 210rpx;
	overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.zone-amount-money {
  color: #ea4d5e;
  font-size: 20rpx;
  margin: 0 auto;
}
</style>
